import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
import { Icon, Layout, Dropdown, Menu, Modal, Form, Input } from 'antd';
import {connect} from 'react-redux'
import {logout} from '../../redux/actions'
import './index.less';
const { Header } = Layout;

class MyHeader extends Component{
  state = {
    showModal: false
  }
  logout = () => {
    this.props.logout()
  }
  isModal = () => {
    this.setState({
      showModal: true
    })
  }
  handleCancel = e => {
    this.setState({
      showModal: false
    })
  }
  render() {
    const username = this.props.user.loginName
    const menu = (
      <Menu>
        <Menu.Item key="editPassword" onClick={this.isModal}>
          <span target="_blank" rel="noopener noreferrer">
            修改密码
          </span>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout" onClick={this.logout}>
          <span target="_blank" rel="noopener noreferrer">
            安全退出
          </span>
        </Menu.Item>
      </Menu>
    );
    return (
      <Header className="my_header">
        <Icon className="trigger" type='menu-unfold' />
        <Dropdown overlay={menu}>
          <span className="ant-dropdown-link">
            {username} <Icon type="down" />
          </span>
        </Dropdown>
        <Modal title="修改密码" visible={this.state.showModal} onOk={this.handleOk} onCancel={this.handleCancel}>
          <Form labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={{xs:{span: 24}, sm:{span:16}}}>
            <Form.Item label="当前密码">
              <Input placeholder="请输入当前使用的密码" />
            </Form.Item>
            <Form.Item label="新密码">
              <Input placeholder="请输入新密码" />
            </Form.Item>
            <Form.Item label="确认密码">
              <Input placeholder="请再次输入新密码" />
            </Form.Item>
          </Form>
        </Modal>
      </Header>
    )
  }
}
export default connect(
  state => ({
    user: state.user
  }),
  {logout}
)(withRouter(MyHeader))